<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
	<head th:replace="_fragments :: head(~{::title})">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initia-scalel=1.0 ">
		<title>博客详情</title>
		<link rel="stylesheet" href="../static/css/semantic.min.css">
		<link rel="stylesheet" href="../static/css/typo.css">
		<link rel="stylesheet" href="../static/css/animate.css">
		<link rel="stylesheet" href="../static/lib/prism/prism.css">
		<link rel="stylesheet" href="../static/lib/tocbot/tocbot.css">
		<link rel="stylesheet" href="../static/css/me.css"/>
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
	</head>
	<body>
		<!-- 导航 -->
		<nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
			<div class="ui container">
				<!-- stackable  可堆叠的 -->
				<div class="ui inverted  secondary stackable menu">
				<h2 class="ui purple header item">Candy Blog</h2>
					<a href="#" class="m-item item  m-mobile-hide"><i class="  home icon"></i>首页</a>
					<a href="#" class="m-item item  m-mobile-hide"><i class="  idea icon  "></i>分类</a>
					<a href="#" class="m-item item  m-mobile-hide"><i class="  tag icon  "></i>标签</a>
					<a href="#" class="m-item item  m-mobile-hide"><i class="  clone  icon "></i>归档</a>
					<a href="#" class="m-item item  m-mobile-hide"><i class="  info icon "></i>关于我</a>
					<!-- 搜索框 -->
					<div class="right m-item  item  m-mobile-hide">
						<div class="ui icon inverted transparent input">
							<input  type="text" placeholder="Search..."/>
							<i class = "search link icon"></i>
						</div>
					</div>				
				</div>			
			</div>
			<a href="#" class="ui menu toggle black icon button  m-right-top  m-mobile-show">
				<i class="sidebar icon"></i>
			</a>
		</nav>
		
		<!-- 中间内容 -->
		<!-- attached 拼接的效果 -->
		<div id="waypoint" class="m-container-small  m-padded-tb-big  animated fadeIn">
			<div class="ui container">
				<!-- 顶部 -->
				<div class="ui top attached segment">
					<div class="ui  horizontal link list">
						<div class="item">
							<img src="https://picsum.photos/id/1045/800/450" class="ui avatar image" />
							<!-- < a href="#" class="header">张馨方</ a>    浅色用a标签 展示数据-->
							<div class="content"> <div class="header">张馨方</div> </div>
						</div>
						<div class="item">
							<i class="calendar alternate icon"></i>2021-11-12 
						</div>
						<div class="item">
							<i class="eye  icon"></i>1314
						</div>
					</div>
				</div>
				<div class="ui attached segment">
					<!-- 图片区域 -->
					<img src="https://picsum.photos/id/101/800/450" class="ui fluid rounded image" />
				</div>
				<div class="ui attached padded segment">
				<!-- 	内容 -->
				<!-- ui segment 代表一个容器 -->
				<div class="ui segment  right aligned basic">
					<div class="ui label basic red ">原创</div>
				</div>
				
				<h2 class="ui header center aligned">《活着》</h2>
				<br>
				<div id="content" class="typo typo-selection   js-toc-content  m-padded-lr-responsive  m-padded-tb-large">
					
					<pre><code class="language-css">p { color: red }</code></pre>
					
					
					<p>《活着》的序言中说：</p>
					<h3>1</h3>
					<p>人是为活着本身而活着的，而不是为活着之外的任何事物所活着。</p>
					<h3>2</h3>
					<p>功名利禄，是我们行走世俗的奖励，却不是桎梏生命的枷锁。</p>
					<h3>3</h3>
					<p>艰苦困难。是每个人成长必经的修行，而不是埋没希望的恶浪。</p>
					<h3>4</h3>
					<p>我们都是这个世界上的迷路者，我们都是按照自己认定的道路寻找方向，也许我们是对的，也许我们错了，或者有时候对了，有时候错了。</p>
					<h3>5</h3>
					<p>人的幸福要等到最后，在他生前和葬礼前，别人无权说他幸福不幸福...</p>
				</div>
				<br/>
				<!-- 标签 -->
				<div class="m-padded-lr">
					<div class="ui basic purple left pointing label">方法论</div>
				</div>
				<!-- 赞赏 -->
				<div class="ui center aligned basic segment">
					<button id="payButton" class="ui red basic circular  button">赞赏</button>
				</div>
				<div class="ui payQR flowing popup  transition hidden">
					<div class="ui red basic label">
						<div class="ui images" style="font-size: inherit !important">
							<div class="image">
								<img src="./static/images/aliPay.jpg" class="ui rounded bordered image" style="width: 120px;"/>
								<div>支付宝</div>
							</div>
							<div class="image">
								<img src="./static/images/wechatPay.jpg" class="ui  rounded bordered image" style="width: 120px;"/>
								<div>微信</div>
							</div>
						</div>
					</div>
				</div>
				
				</div>
				<div class="ui attached positive message">
					<!-- 博客信息 -->
					<div class="ui middle aligned grid">
						<div class="eleven wide column">
							<ui class="list">
								<li>作者：张馨方（联系作者）</li>
								<li>发表时间：2021-11-14</li>
								<li>版权声明：自由转载-非商用-非衍生-保持署名（创意3.0许可证）</li>
								<li>公众号转载：请在文末添加作者公众号二维码</li>
							</ui>
						</div>
						<div class="five wide column">
							<img src="static/images/wechat.jpg" class="ui right floated rounded bordered image" style="width: 110px;" />
						</div>
					</div>
				</div>
				<div id="comment-container" class="ui bottom attached segment">
					<!-- 留言区域列表 -->
					<div class="ui purple  segment">
						<div class=" ui form">
							<div class="ui comments">
							  <h3 class="ui dividing header">Comments</h3>
							  <div class="comment">
							    <a class="avatar">
									
							      <img src="https://picsum.photos/id/12/800/450">
							    </a>
							    <div class="content">
							      <a class="author">Matt</a>
							      <div class="metadata">
							        <span class="date">Today at 5:42PM</span>
							      </div>
							      <div class="text">
							        How artistic!
							      </div>
							      <div class="actions">
							        <a class="reply">Reply</a>
							      </div>
							    </div>
							  </div>
							  <div class="comment">
							    <a class="avatar">
							      <img src="https://picsum.photos/id/120/800/450">
							    </a>
							    <div class="content">
							      <a class="author">Elliot Fu</a>
							      <div class="metadata">
							        <span class="date">Yesterday at 12:30AM</span>
							      </div>
							      <div class="text">
							        <p>This has been very useful for my research. Thanks as well!</p>
							      </div>
							      <div class="actions">
							        <a class="reply">Reply</a>
							      </div>
							    </div>
							    <div class="comments">
							      <div class="comment">
							        <a class="avatar">
							          <img src="https://picsum.photos/id/110/800/450">
							        </a>
							        <div class="content">
							          <a class="author">Jenny Hess</a>
							          <div class="metadata">
							            <span class="date">Just now</span>
							          </div>
							          <div class="text">
							            Elliot you are always so right :)
							          </div>
							          <div class="actions">
							            <a class="reply">Reply</a>
							          </div>
							        </div>
							      </div>
							    </div>
							  </div>
							  <div class="comment">
							    <a class="avatar">
							      <img src="https://picsum.photos/id/117/800/450">
							    </a>
							    <div class="content">
							      <a class="author">Joe Henderson</a>
							      <div class="metadata">
							        <span class="date">5 days ago</span>
							      </div>
							      <div class="text">
							        Dude, this is awesome. Thanks so much
							      </div>
							      <div class="actions">
							        <a class="reply">Reply</a>
							      </div>
							    </div>
							  </div>						
							</div>							
						</div>
					</div>
					<div class="ui form">
						<div class="field">
							<textarea placeholder="请输入评论信息..." name="content"></textarea>							
						</div>
						<div class="fields">
							<div class="field">
								<div class="ui left icon input">
									<i class="user icon"></i>
									<input type="text" placeholder="姓名" name="nickname" />
								</div>							
							</div>
							<div class="field">
								<div class="ui left icon input">
									<i class="mail icon"></i>
									<input type="text" placeholder="邮箱" name="email" />
								</div>							
							</div>
							<div class="field">
								<button class="ui purple button">
									<i class="edit icon"></i>
									发布									
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		<div id="toolbar" class="m-padded  m-fixed m-right-bottom" style="display: none;">
			<div class="ui vertical icon buttons">
				<button type="button" class="ui toc purple button">目录</button>
				<a href="#comment-container" class="ui purple button">留言</a>
				<button class="ui wechat icon olive button"><i class="weixin icon"></i></button>			
				<div id="toTop-button" class="ui icon olive button"><i class="chevron up icon"></i></div>
			</div>
		</div>
		
		
		<div class="ui toc-container flowing popup  transition hidden" style="width: 250px !important;">			
			<ol class="js-toc">
				
			</ol>
		</div>
		
		<div id="qrcode" class="ui wechat-qr flowing popup  transition hidden" style="width: 130px !important;">
			<!-- <img src="static/images/wechat.jpg" class="ui rounded image" style="width: 120px !important;"> -->
		</div>
		
		<br>
		<br>		
		<!-- 底部footer -->
		<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
			
			<div class="ui center aligned container">
				<!-- grid 分成16份 -->
				<div class="ui inverted divided stackable grid">
					<!-- 二维码 -->
	                 <div class="three wide column"> 
					   <div class="ui inverted link list">
					 	<div class="item">
							 <img src="../static/images/wechat.jpg" class="ui rounded image" style="width: 110px;"/>
						</div>
					   </div>
					 </div>
					 <!-- 列表 -->
					 <div class="three wide column"> 
					 <h4 class="ui inverted header m-text-spaced  m-text-thin ">最新博客</h4>
					 <div class="ui inverted link list">
						 <a href="#" class="item">用户故事（User Story）</a>
						 <a href="#" class="item">用户故事（User Story）</a>
						 <a href="#" class="item">用户故事（User Story）</a>
					 </div>
					 </div>
					 <div class="three wide column">
						 	<h4 class="ui inverted header m-text-spaced  m-text-thin ">联系我</h4>
						 	<div class="ui inverted link list">
						 	    <a href="#" class="item">Email：zxf991028@163.com</a>
						 		<a href="#" class="item">QQ：2438883135</a>
						 		
						 	</div>
					 </div>
					 <div class="seven wide column">
						 	<h4 class="ui inverted header m-text-spaced  m-text-thin ">南风</h4>
						 	<p class="m-text-spaced  m-text-thin  m-opacity-mini">这是我个人的博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
					 </div>
				</div>
					<!-- 最底部的分割线 -->
					<div class="ui inverted section divider"></div>
					<p class="m-text-spaced  m-text-thin  m-opacity-tiny">copyright © 2021 - 2022  南风  Designed By Nanfeng</p>
			</div>
		</footer>

		<!--/*/<th:block th:replace="_fragments :: script">/*/-->
		  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
		  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
		  <script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.3/jquery.scrollTo.min.js"></script>
		  <script src="../static/lib/prism/prism.js"></script>
		  <script src="../static/lib/tocbot/tocbot.min.js"></script>
		  <script src="../static/lib/qrcode/qrcode.min.js"></script>
		  <script src="../static/lib/waypoint/jquery.waypoints.min.js"></script>
		  <script src="/js/autoload.js"></script>
		<!--/*/</th:block>/*/-->
		<script>
			$('.menu.toggle').click(function(){
				$('.m-item').toggleClass('m-mobile-hide');
			});
			
			$('#payButton').popup({
				popup:$('.payQR.popup'),
				on:'click',
				position:'bottom center'
			});
			
			tocbot.init({
			  // Where to render the table of contents.
			  tocSelector: '.js-toc',
			  // Where to grab the headings to build the table of contents.
			  contentSelector: '.js-toc-content',
			  // Which headings to grab inside of the contentSelector element.
			  headingSelector: 'h1, h2, h3',
			  // For headings inside relative or absolute positioned containers within content.
			  hasInnerContainers: true,
			});
			
			$('.toc.button').popup({
				popup:$('.toc-container.popup'),
				on:'click',
				position:'left center'
			});
			
			$('.wechat').popup({
				popup:$('.wechat-qr'),
				on:'hover',
				position:'left center'
			});
			
			var qrcode = new QRCode("qrcode", {
			    text: "http://81.70.4.236:8080/",
			    width: 110,
			    height: 110,
			    colorDark : "#000000",
			    colorLight : "#ffffff",
			    correctLevel : QRCode.CorrectLevel.H
			});
			
			$('#toTop-button').click(function(){
				$(window).scrollTo(0,500);
			});
			
			
			var waypoint = new Waypoint({
			  element: document.getElementById('waypoint'),
			  handler: function(direction) {
				  if(direction == 'down'){
					  $('#toolbar').show(500);
				  }else{
					  $('#toolbar').hide(500);
				  }
			    console.log('Scrolled to waypoint!   '+direction)
			  }
			})
			
		</script>
		
	</body>
</html>
